<template>
	<view class="recycle-field-component">
		<view v-if="icon" class="field-image">
			<image class="icon-field" :src="icon"></image>
		</view>
		<view v-if="label" class="field-label">{{ label }}</view>
		<view
			class="field-body"
			@click="$emit('content')"
		>
			<slot>
				<view
					v-if="showContent"
					class="field-value"
					:class="[contentAlign]"
				>
					<view v-if="text" class="field-inputed">{{ text }}</view>
					<view v-else class="field-placeholder">{{ placeholder }}</view>
				</view>
			</slot>
		</view>
		<slot name="fieldRight">
			<view
				v-if="showRight" class="field-more"
				@click="$emit('right')"
			>
				<text v-if="rightText">{{ rightText }}</text>
				<image class="icon-more" src="@/static/images/icon_gray_more.png"></image>
			</view>
		</slot>
	</view>
</template>

<script>
export default {
	props: {
		text: String,
		label: String,
		icon: String,
		showContent: {
			type: Boolean,
			default: true
		},
		showRight: {
			type: Boolean,
			default: true
		},
		contentAlign: {
			type: String,
			default: ''
		},
		rightText: String,
		placeholder: String,
	}
}
</script>

<style lang="scss" scoped>
@import './index.scss';
</style>